<template>
	<view id="main">
		<view id="header">
			<text class="xinxi">信息</text>
			<button id="tianjia" class="button" @click="tianjia()">添加信息</button>
			<button id="chakan" class="button" @click="chakan()">查看安全报表</button>
		</view>
		<view class="from">
			<view class="from-header">
				<text>巡检日期</text>
				<text>读数(m³)</text>
				<text>燃气泄漏</text>
				<text>安全系数</text>
				<text>视频图片</text>
			</view>
			<view v-for="(item,index) in arr" class="from-body">
				<text>{{item.date}}</text>
				<text>{{item.dushu}}</text>
				<text>{{item.xielou==0?"无":(item.xielou==1?"轻微":"严重")}}</text>
				<text>{{item.anquan==0?"低":(item.xielou==1?"中":"高")}}</text>
				<text id="tan" @click="open(index,arr)">查看</text>
			</view>
		</view>
		<uni-popup ref="popup" type="center"><image :src="imgSrc"></image></uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgSrc:null,
				arr: [{
						"date": "21/3/1",
						"dushu": "290",
						"xielou": 0,
						"anquan": 0,
						"imgSrc": "../../static/logo.png"
					},
					{
						"date": "21/3/1",
						"dushu": "290",
						"xielou": 1,
						"anquan": 1,
						"imgSrc": "../../static/logo.png"
					},
					{
						"date": "21/3/1",
						"dushu": "290",
						"xielou": 2,
						"anquan": 2,
						"imgSrc": "../../static/logo.png"
					},
					{
						"date": "21/3/1",
						"dushu": "290",
						"xielou": 1,
						"anquan": 1,
						"imgSrc": "../../static/logo.png"
					}
				]
			}
		},
		methods: {
			open(index,arr) {
				console.log(index)
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.imgSrc=arr[index].imgSrc;
				this.$refs.popup.open('top');
			},
			tianjia(){
				uni.navigateTo({
				    url: '../add/add'
				});
			},
			chakan(){
				uni.navigateTo({
				    url: '../baobiao/baobiao'
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	#main {
		padding: 28rpx;
	}

	#header {
		width: 100%;
		display: flex;
		height: 154rpx;
		line-height: 154rpx;
		font-weight: bold;
	}

	.button {
		border: solid 1rpx #2475fb;
		height: 62rpx;
		line-height: 58rpx;
		font-size: 32rpx;
		margin: auto 8rpx;
	}

	.xinxi {
		flex: 1;
	}

	#tianjia {
		background-color: #ffffff;
		color: #2475fb;
	}

	#chakan {
		background-color: #2475fb;
		color: #ffffff;
	}

	.from-header {
		display: flex;
		background-color: #f2f4f5;
		border-radius: 12rpx;
		height: 80rpx;
		line-height: 78rpx;
		font-size: 25rpx;
		font-weight: bold;
		justify-content: space-around;

	}
	.from-body {
		display: flex;
		height: 80rpx;
		line-height: 78rpx;
		font-size: 25rpx;
		justify-content: space-around;
		border-bottom: solid 3rpx #f2f4f5; 
	}
	.from-body>text{
		width: 52rpx;
	}
	#tan{
		color: #2475fb;
		background-color: transparent;
		text-decoration: underline;
	}
</style>
